import Vue from 'vue';
import App from './App.vue';

import Vuex from 'vuex'; // 引入vuex包
Vue.use(Vuex); // 注册vuex包

Vue.config.productionTip = false;

const store = new Vuex.Store({
  state: {
    count: 0,
    list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  },
  mutations: {
    // 方法里参数 第一个参数是当前store的state属性
    // payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷
    // addCount(state) {
    //   state.count += 1;
    // },

    addCount(state, payload) {
      state.count += payload;
    },
  },
  actions: {
    // 获取异步的数据 context表示当前的store的实例
    // 可以通过 context.state 获取状态
    // 也可以通过context.commit 来提交mutations，
    // 也可以 context.diapatch调用其他的action
    getAsyncCount(context) {
      setTimeout(function() {
        // 一秒钟之后 要给一个数 去修改state
        context.commit('addCount', 123);
      }, 1000);
    },
  },
  // vuex的计算属性
  getters: {
    filterList: (state) => state.list.filter((item) => item > 5),
    token: (state) => state.user.token, // 建立了一个getters指向 子模块的属性  快捷访问的属性
    name: (state) => state.setting.name,
  },
  // 模块化
  modules: {
    // 子模块
    user: {
      namespaced: true, // 给true就表示加锁
      state: {
        token: '12345',
      },
      mutations: {
        updateToken(state) {
          state.token = '67890';
        },
      },
      actions: {},
    },
    setting: {
      state: {
        name: 'Vuex实例',
      },
    },
  },
}); // 实例化一个Store对象

new Vue({
  render: (h) => h(App),
  store,
}).$mount('#app');
